<template>
    <div id="editPassenger">
        <NavBarTitle :NavBarTitle="NavBarTitle"/>
        <van-form @submit="onSubmit">
            <van-field
                    v-model="username"
                    name="username"
                    label="姓名"
                    placeholder="与证件姓名一致"
                    clearable
            />
            <van-field
                    readonly
                    clickable
                    label="身份证"
                    placeholder="乘客证件号码"
                    clearable
                    name="idCard"
                    :value="idCard"
                    @touchstart.native.stop="show = true"
            />
            <van-number-keyboard
                    v-model="idCard"
                    :show="show"
                    extra-key="X"
                    close-button-text="完成"
                    @input="onInput"
                    @delete="onDelete"
                    @blur="show = false"
            />
            <van-field
                    v-model="mobile"
                    type="number"
                    name="mobile"
                    label="联系方式"
                    placeholder="联系方式"
                    clearable
            />
            <div style="margin: 82px 12px 0 12px;">
                <van-button block type="info" native-type="submit" color="#0fa0a0" style="font-size:18px;border-radius: 5px">
                    保存
                </van-button>
            </div>
        </van-form>
        <Loading :isLoading="isLoading"/>
    </div>
</template>

<script>
    import Loading from 'components/Loading.vue'
    import NavBarTitle from 'components/NavBarTitle.vue'
    export default {
        data() {
            return {
                NavBarTitle:'修改乘客信息',
                show: false,
                username:'',
                idCard:'',
                mobile:'',
                isLoading: true,
            }
        },
        components: {
            NavBarTitle,
            Loading
        },
        methods: {
            onInput(value) {

            },
            onDelete() {

            },
            onSubmit(values){
                console.log(values);
                let data = {
                    token: this.$store.state.token,
                    id:this.$route.query.id,
                    name: values.username,
                    idcard: values.idCard,
                    telephone: values.mobile
                };
                this.$axios.post(this.$index+this.$api.user.editcontacts,this.$Qs.stringify(data))
                    .then((res) => {
                        console.log(res);
                        if(res.data.flag){
                            this.$toast.success({
                                message: res.data.msg,
                                duration: 1000,
                                onClose: () => {
                                    this.$router.replace('/CommonInfo');
                                }
                            });
                        }else {
                            this.$toast(res.data.msg);
                        }
                    }).catch((err) => {
                    console.log(err);
                })
            }
        },
        beforeMount() {

        },
        created(){
            let data = {
                token: this.$store.state.token,
                id:this.$route.query.id
            };
            this.$axios.post(this.$index+this.$api.user.contacts,this.$Qs.stringify(data))
                .then((res) => {
                    console.log(res);
                    if(res.data.flag){
                        this.username = res.data.data[0].name;
                        this.idCard = res.data.data[0].idcard;
                        this.mobile = res.data.data[0].telephone;
                        this.isLoading = false;
                    }else {
                        this.$toast(res.data.msg)
                    }
                }).catch((err) => {
                console.log(err);
            })
        }
    }
</script>

<style scoped>
    /deep/.van-cell{
        padding: 13px 12px;
    }
</style>